<template>
  <div class="player-detail-wrap" v-loading="loading">
    <div class="player-base-info">
      <div class="player-act">
        <el-image style="width: 180px; height: 240px">
          <div slot="error" class="image-slot"><span>加载失败</span></div>
        </el-image>
      </div>
      <div class="player-info-data">
        <Title title="基本信息" :dark="true" />
        <el-descriptions size="small" :column="1">
          <el-descriptions-item label="姓名">{{
            detailInfo.name || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{
            detailInfo.age || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="身高"
            >{{ detailInfo.height || "-" }}CM</el-descriptions-item
          >
          <el-descriptions-item label="体重"
            >{{ detailInfo.weight || "-" }}KG</el-descriptions-item
          >
          <el-descriptions-item label="位置">{{
            formatPosition
          }}</el-descriptions-item>
          <el-descriptions-item label="签约状态">
            <el-tag
              v-if="detailInfo.status"
              size="mini"
              :type="{ 1: 'success', 2: 'danger' }[detailInfo.status]"
              >{{ PLAYER_STATUS[detailInfo.status] }}</el-tag
            >
            <span v-else>-</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="player-data-info">
      <Title title="球员数据" :dark="true" />
      <CommonDetail ref="commonDetailRef" :detail-info="detailInfo" />
    </div>
    <div class="player-race-list">
      <Title title="比赛数据" :dark="true" />
      <div style="height: 190px">
        <el-table
          :data="raceListData"
          size="small"
          height="100%"
          style="background-color: #161627"
        >
          <el-table-column label="比赛时间" prop="startTime" minWidth="330px">
            <template slot-scope="scope">
              <span> {{ formatTime(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置" prop="position" minWidth="80px">
            <template slot-scope="scope">
              <span> {{ formatPositionMethods(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上场时间" prop="time" minWidth="80px">
            <template slot-scope="scope">
              <span> {{ scope.row.time ? scope.row.time : "0" }}min</span>
            </template>
          </el-table-column>
          <el-table-column
            label="比赛队伍"
            prop="otherTeamName"
            minWidth="100px"
          ></el-table-column>
          <el-table-column
            label="得分"
            prop="score"
            minWidth="80px"
          ></el-table-column>
          <el-table-column label="犯规次数" minWidth="80px"></el-table-column>
          <el-table-column label="操作" fixed="right" minWidth="120px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleJumpToRaceDetail(scope.row)"
                >比赛详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchPlayerDetailData,
  fetchPLayerRaceListData,
} from "@/api/player/index";
import Title from "@/components/Title/index.vue";
import CommonDetail from "./components/commonDetail.vue";
import { PLAYER_POSITION, PLAYER_STATUS } from "./constants/index";
import moment from "moment";
export default {
  name: "player-detail",
  components: { Title, CommonDetail },
  data() {
    return {
      PLAYER_STATUS,
      loading: true,
      detailInfo: {},
      raceListData: [],
    };
  },
  computed: {
    id({ $route }) {
      return $route.query.id;
    },
    formatPosition({ detailInfo }) {
      return detailInfo?.position
        ? PLAYER_POSITION[detailInfo?.position] || "-"
        : "-";
    },
  },
  created() {
    this.requestPlayerDetailData();
    this.requestPlayerRaceListData();
  },
  methods: {
    formatTime(row) {
      return row?.startTime && row?.endTime
        ? moment(row?.startTime).format("YYYY-MM-DD HH:mm:ss") +
            " ~ " +
            moment(row?.endTime).format("YYYY-MM-DD HH:mm:ss")
        : "-";
    },
    formatPositionMethods(row) {
      return row?.position ? PLAYER_POSITION[row?.position] || "-" : "-";
    },
    handleJumpToRaceDetail(row) {
      if (!row?.id) {
        this.$message.warning("数据出现错误，请刷新重试！");
        return false;
      }
      this.$router.push({ name: "race-detail", query: { id: row?.id } });
    },
    requestPlayerDetailData() {
      this.loading = true;
      const params = {
        id: this.id,
      };
      fetchPlayerDetailData(params)
        .then((res) => {
          this.detailInfo = res?.data || {};
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    requestPlayerRaceListData() {
      const params = {
        id: this.id,
      };
      fetchPLayerRaceListData(params)
        .then((res) => {
          const data = res?.data;
          this.raceListData = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.player-detail-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #161627 !important;
}
.player-base-info {
  height: 230px;
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.player-act {
  width: 40%;
}
.player-info-data {
  width: 50%;
  background-color: #161627 !important;
}
.player-data-info {
  width: 100%;
  background-color: #161627;
}
</style>
<style>
.image-slot {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.player-race-list {
  width: 100%;
  background-color: #161627;
  color: #fff;
}
</style>
<style>
.player-info-data .el-descriptions__body {
  background-color: #161627 !important;
  color: #ffffff !important;
}
.player-race-list .el-table__cell {
  background-color: #161627 !important;
  color: #ffffff !important;
}
</style>
